<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.108.0">
    <title>支付API</title>

    <link rel="canonical" href="https://getbootstrap.com/docs/5.3/examples/album/">

    

    

<link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/bootstrap-table.css" rel="stylesheet">

    <style>
      .select,
      #locale {
        width: 100%;
      }
      .like {
        margin-right: 10px;
      }
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }


      .nav-scroller .nav {
        display: flex;
        flex-wrap: nowrap;
        padding-bottom: 1rem;
        margin-top: -1px;
        overflow-x: auto;
        text-align: center;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
      }
    </style>


  </head>
  <body>
    
<header>
  <div class="navbar navbar-dark bg-dark shadow-sm">
    <div class="container">
      <a href="#" class="navbar-brand d-flex align-items-center">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="me-2" viewBox="0 0 24 24"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
        <strong>订单列表</strong>
      </a>
    </div>
  </div>
</header>

<main>
<div style="padding: 10px;">
  <table id="table"></table>
</div>

</main>

<footer class="text-muted py-5">
  <div class="container">
    <p class="float-end mb-1">
      <a href="#" id="backHome">返回商品列表</a>
    </p>
  </div>
</footer>
<script src="/js/jquery-3.6.0.min.js"></script>
<script src="/js/bootstrap.js"></script>
<script src="/js/bootstrap-table.js"></script>
<script src="/js/bootstrap-table-locale-all.js"></script>
<script src="/js/bootstrap-table-zh-CN.js"></script>
<script>
  let url_host='https://322mn01275zw.vicp.fun'
  // 使用jQuery监听点击事件
  $(document).ready(function () {
    // 准备发送的数据
    $('#backHome').click(function () {
      window.location.href = url_host+'/home';
    });
  });

  $('#table').bootstrapTable({
    locale: 'zh-CN',
    url: url_host+'/order/list',
    method: 'GET',   //数据请求方式
    sidePagination:'server',//服务端分页
    pagination:true,//开启分页
    pageNumber:1, //当前地基页
    pageSize:5, //每页显示数据条数
    // 默认分页给后台传递的是offset和limit
    uniqueId:"id",
    columns: [{
      field: 'orderNo',
      title: '订单编号'
    }, {
      field: 'title',
      title: '订单标题'
    }, {
      field: 'totalFee',
      title: '订单金额(单位：元)',
        formatter: function(value, item, index) {
           return value*0.01
        }
    }, {
      field: 'paymentType',
      title: '支付方式'
    }, {
      field: 'orderStatus',
      title: '订单状态',
        formatter: function(value, item, index) {
            if (value=='支付成功') {
                return '<button type="button" class="btn btn-success">'+value+'</button>';
            }
            else if (value=='未支付') {
                return '<button type="button" class="btn btn-primary">'+value+'</button>';
            }else{
                return '<button type="button" class="btn btn-danger">'+value+'</button>'
            }
        }
    }, {
      title: '操作',
      align: 'center',
      formatter: function(value, row, index) {
        var actions = [];
        if(row.orderStatus=='未支付'){
          actions.push('<button class="btn btn-outline-primary"  onclick="payOp(\''+row.orderNo+'\')"><i class="fa fa-edit"></i>支付</button> ');
          actions.push('<button class="btn btn-outline-warning"  onclick="cancelOp(\''+row.orderNo+'\')"><i class="fa fa-remove"></i>取消</button> ');
        }else if((row.orderStatus=='支付成功'))

        actions.push('<button class="btn btn-outline-danger"  onclick="backOp(\''+row.orderNo+'\')"><i class="fa fa-remove"></i>退款</button> ');

        return actions.join('');
      }
    }]
  });

  function payOp(orderNo) {
  }
  function backOp(orderNo) {
    let reason="质量问题";
    const data = {

    };
    fetch(url_host+"/api/ali-pay/trade/refund/"+orderNo+"/"+reason, {  // 替换为你的API地址
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(data)
    })
            .then(response => response.json())  // 解析响应为JSON
            .then(data => {
              debugger
              if (data.code === 'SUCCESS') {
                $('#table').bootstrapTable('refresh');
                alert('退款成功！');
              } else {
                alert('退款异常！');
              }
            })
            .catch(error => {
              console.error('Error:', error);
              alert('退款失败，请检查网络或API地址！');
            });
  }


  function cancelOp(orderNo){
    const data = {

    };
      // debugger;
      fetch(url_host+"/api/ali-pay/trade/close/"+orderNo, {  // 替换为你的API地址
          method: 'POST',
          headers: {
              'Content-Type': 'application/json'
          },
          body: JSON.stringify(data)
      })
          .then(response => response.json())  // 解析响应为JSON
          .then(data => {
              debugger
              if (data.code === 'SUCCESS') {
                  $('#table').bootstrapTable('refresh');
                  alert('取消成功！');
              } else {
                  alert('取消异常！');
              }
          })
          .catch(error => {
              console.error('Error:', error);
              alert('提交失败，请检查网络或API地址！');
          });
  }


</script>

  </body>
</html>
